<template>
  <div class="my">
    <div class="top" :style="isLogin ? 'background-color: #fbb705':'background-color: #fff'">
      <div class="top-left" v-if="isLogin" @click="toSet">
        <img src="../assets/set.png" alt="" />
      </div>
      <div class="top-right" v-if="isLogin">
        <van-icon name="share-o" size="30" @click="onShare" />
      </div>
    </div>
    <div class="noLogin" v-if="!isLogin">
      <div class="title">
        网上厨房<br />
        会做饭很酷~
      </div>
      <button class="btn" @click="toLogin">手机号登录</button>
      <div class="other">
        <div class="o-title">其他登录方式</div>
        <div class="icon">
          <img src="../assets/wx.png" alt="" @click="a"/>
          <img src="../assets/QQ.png" alt="" @click="a"/>
          <img src="../assets/wb.png" alt="" @click="a"/>
          <img src="../assets/phone.png" alt="" @click="toLogin"/>
        </div>
      </div>
    </div>
    <div class="content" v-if="isLogin">
      <div class="u-box1" ref="box1">
        <div class="u-box1-l"><img :src="userData.portrait" alt="" /></div>
        <div class="u-box1-r">
          <div class="u-box1-r-t">
            <div class="nick">{{userData.nickName}}</div>
            <div class="medal">
              <img
                src="https://i1.douguo.com/upload/banner/3/f/8/3f9e15fab7feeab9c1bb22aacf203478.png"
                alt=""
              />
              <div class="t">0枚</div>
            </div>
            <div class="lvl">
              <i>LV.1</i>
            </div>
          </div>
          <div class="focusBtn" @click="toPersonalData">✏️ 补全资料 +500经验值</div>
        </div>
      </div>
      <div class="u-box2">
        <div class="u-box2-t">
          <span class="gender">{{userData.gender==1 ? '厨男' : '厨娘'}}</span>
          <span class="age">豆龄0.1岁</span>
          <span class="location">{{userData.location}}</span>
        </div>
        <div class="introduction">
          {{userData.signature != '' ? userData.signature : '吃货不是在吃就是在去吃的路上，没时间写签名'}}
        </div>
      </div>
      <div class="u-box3">
        <div class="u-box3-item" @click="toMyFocus">
          <div class="count">{{userData.Focus.length}}</div>
          <div class="text">关注</div>
        </div>
        <div class="u-box3-item">
          <div class="count">0</div>
          <div class="text">粉丝</div>
        </div>
        <div class="u-box3-item">
          <div class="count">0</div>
          <div class="text">被收藏</div>
        </div>
        <div class="u-box3-item">
          <div class="count">0</div>
          <div class="text">被学做</div>
        </div>
        <div class="u-box3-item">
          <div class="count">66</div>
          <div class="text">经验值</div>
        </div>
      </div>
      <div class="van-tabs-box">
        <van-tabs v-model="active" color="#fbb705">
          <van-tab title="菜谱">
            <div class="text">要发布点内容才能配得上我吃货的名声</div>
          </van-tab>
          <van-tab title="笔记">
            <div class="text">暂时还没有发布笔记</div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <van-share-sheet
      v-model="showShare"
      :options="options"
      @select="onselect"
      @cancel="oncancel"
      @click-overlay="onClickOverlay"
    />
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      isLogin: false,
      active: 0,
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
        ],
      ],
      userData: {
        phone: "",
        password: "",
        isLogin: false,
        Focus: [],
        nickName: "",
        portrait: "",
        gender: 1,
        location: "",
        signature: "",
      },
    };
  },
  created() {
    if (localStorage.getItem("users")) {
      let users = JSON.parse(localStorage.getItem("users"));
      users.forEach((ele) => {
        if (ele.isLogin) {
          for (let key in this.userData) {
            this.userData[key] = ele[key];
          }
          this.isLogin = true;
        }
      });
    }
  },
  methods: {
    toLogin(){
      this.$router.push({name:'Login'})
    },
    onShare() {
      this.showShare = true;
    },
    onShare() {
      this.showShare = true;
    },
    onselect() {
      this.$toast.success("分享成功");
      this.showShare = false;
    },
    oncancel() {
      this.showShare = false;
    },
    onClickOverlay() {
      this.oncancel();
    },
    toSet(){
      this.$router.push({name:'Set'})
    },
    toPersonalData(){
      this.$router.push({name:'PersonalData'})
    },
    toMyFocus(){
      this.$router.push({name:'MyFocus'})
    },
    a(){
      this.$toast('尚不支持')
    }
  },
};
</script>

<style lang="scss" scoped>
.my {
  .top {
    width: calc(100% - 30px);
    padding: 45px 15px 15px;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    background-color: #fbb705;
    .top-left {
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
  .noLogin {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 40px;
    background-color: #fff;
    .title {
      font-size: 30px;
    }
    .btn {
      margin-top: 200px;
      width: 100%;
      border-style: none;
      padding: 15px;
      background-color: #fbb705;
      border-radius: 200px;
      font-size: 16px;
    }
    .other {
      width: 100%;
      margin-top: 30px;
      .o-title {
        color: #999;
      }
      .icon {
        display: flex;
        margin-top: 15px;
        img {
          width: 40px;
          height: 40px;
          margin-right: 20px;
        }
      }
    }
  }
  .content {
    position: fixed;
    top: 93px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    .u-box1 {
      padding: 0 15px;
      display: flex;
      align-items: center;
      margin: 15px 0;
      .u-box1-l {
        margin-right: 10px;
        img {
          width: 75px;
          height: 75px;
          border-radius: 50%;
        }
      }
      .u-box1-r {
        width: calc(100% - 75px - 10px);
        .u-box1-r-t {
          display: flex;
          align-items: center;
          .nick {
            font-size: 18px;
          }
          .medal {
            width: 60px;
            position: relative;
            margin: 5px;
            img {
              width: 100%;
            }
            .t {
              position: absolute;
              top: 5px;
              right: 8px;
              font-size: 6px;
            }
          }
          .lvl {
            color: #fbb705;
            font-weight: 600;
          }
        }
        .focusBtn {
          font-size: 13px;
          width: 100%;
          text-align: center;
          padding: 8px 0;
          background-color: #fbb705;
          border-radius: 20px;
        }
      }
    }
    .u-box2 {
      padding: 0 15px;
      line-height: 22px;
      .u-box2-t {
        span {
          font-size: 13px;
          margin-right: 20px;
        }
      }
      .introduction {
        font-size: 13px;
      }
    }
    .u-box3 {
      padding: 0 15px;
      display: flex;
      justify-content: space-around;
      margin: 20px 0;
      .u-box3-item {
        text-align: center;
      }
    }
    .van-tabs-box {
      text-align: center;
      .text {
        padding-top: 20px;
      }
    }
  }
}
</style>